<template>
	<view class="mdList color333">
		<view class="flex font14 alignCenter justConBetween listItem" v-for="(item,index) in listData" :key="index" @click="clickItem(item,index)">
			<view class="flex alignCenter listItemLeft">
				<image v-if="item.icon" :src="item.icon" mode="widthFix" class="listIcon"></image>
				<view class="mdListTitle font14">{{item.title}} <text class="color999 font14" v-if="item.subTitle">{{item.subTitle}}</text></view>
			</view>
			<view class="flex alignCenter justConEnd">
				<!-- 纯文本 -->
				<view class="hiddenOneline" v-if="(item.val && (!item.rightType || item.rightType=='none'))">{{item.val.length>15?item.val.substring(0,15)+'...':item.val}}</view>
				<!-- 图片展示 -->
				<image class="showImage" v-if="(item.rightType=='image' || item.rightType=='all')" :src="item.val || '/static/image/icons/imgDefault.png'" mode="widthFix" @click.stop="changImgClick($event,item)"></image>
				<!-- <image class="showImage" v-if="((item.rightType=='image' && item.val) || item.rightType=='all')" :src="item.val" mode="widthFix" @click.stop="changImgClick($event,item)"></image>
				<view class="" v-if="((item.rightType=='image' && !item.val) || item.rightType=='all')" @click.stop="changImgClick($event,item)">上传</view> -->
				<!-- 开关 -->
				<switch class="switch" v-if="item.rightType=='switch'" style="transform:scale(0.7)" :checked="item.val" @change.stop="switchChange($event,item)"/>
				<!-- 红点 -->
				<view class="noRead" v-if="(item.rightType=='redDot')"></view>
				<!-- 右箭头 -->
				<uni-icons type="right" size="18" v-if="(!item.rightType || item.rightType=='redDot' || item.rightType=='all' )" @click="clickItem(item,index)"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-mdlist",
		props:{
			listData:{
				type:Array,
				default:[]
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			clickItem(item,index){
				this.$emit('clickItem',item,index)
			},
			changImgClick(e,item){
				let imgClickObj={
					value:e.detail.value,
					item:item
				}
				this.$emit("clickImg",imgClickObj)
			},
			switchChange(e,item){
				console.log('e，item',e,item)
				let imgClickObj={
					value:e.detail.value,
					item:item
				}
				this.$emit("clickSwitch",imgClickObj)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";	
.listItem{
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	// border:1px solid $bordercolor;
	border-bottom: 1px solid $bordercolor;
	// border-radius: 10rpx;
	.listItemLeft{
		flex-shrink: 0;
	}
	.listIcon{
		width: 30rpx;
		height:30rpx;
		margin:0 10rpx 0 20rpx;
	}
	.mdListTitle{
		text{
			display: inline-block;
			margin-left: 30rpx;
		}
	}
	.showImage{
		width: 100rpx;
		height: 100rpx;
	}
	.noRead{
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background: $reddot;
	}
}
::v-deep .uni-switch-input-checked{
	background-color:$colorMain !important;
	border-color:$colorMain !important;
}
</style>